import React from 'react';
import { useNavigate } from 'react-router-dom';

const NotFound = () => {
  const navigate = useNavigate();

  return (
    <div style={{ 
      display: 'flex', 
      flexDirection: 'column',
      justifyContent: 'center', 
      alignItems: 'center', 
      height: '100vh',
      backgroundColor: '#f0f2f5'
    }}>
      <h1 style={{ fontSize: '72px', fontWeight: 'bold', color: '#1890ff', margin: '0' }}>404</h1>
      <h2 style={{ fontSize: '24px', marginTop: '20px' }}>页面未找到</h2>
      <p style={{ fontSize: '16px', color: '#666', marginTop: '10px' }}>
        抱歉，您访问的页面不存在
      </p>
      
      <button 
        onClick={() => navigate('/home')}
        style={{ 
          marginTop: '30px',
          padding: '10px 20px', 
          backgroundColor: '#1890ff', 
          color: 'white', 
          border: 'none', 
          borderRadius: '4px',
          fontSize: '16px',
          cursor: 'pointer'
        }}
      >
        返回首页
      </button>
    </div>
  );
};

export default NotFound;